<template>
  <a-page-header
    :title="isView ? '专项经费预览' : '专项经费审批' "
    @back="emit('close')"
    style="background-color: #fff; border-radius: 10px; height: 100%"
  >
    <a-card
      style="height: 100%; border-radius: 10px; padding: none; overflow-x;: auto"
      :bodyStyle="{ padding: '0px' }"
      :bordered="false"
    >
      <!-- 步骤条 -->
      <a-steps @change="changeStatus" :current="current">
        <a-step title="待审核">
          <template #icon>
            <user-outlined />
          </template>
        </a-step>
        <a-step title="待财务审核">
          <template #icon v-if="audit === 1">
            <loading-outlined />
          </template>
          <template #icon v-else>
            <solution-outlined />
          </template>
        </a-step>
        <a-step title="待工会主席审核">
          <template #icon v-if="audit === 2">
            <loading-outlined />
          </template>
          <template #icon v-else>
            <audit-outlined />
          </template>
        </a-step>
        <a-step title="审核完毕">
          <template #icon>
            <smile-outlined />
          </template>
        </a-step>
      </a-steps>
      <!-- 审核表单 -->
      <a-card :bordered="false" v-if="audit === current && current !== 3">
        <template #title>
          <div style="width: 100%; text-align: center">审核信息</div>
        </template>
        <a-row>
          <a-col :span="12">
            <a-form-item
              label="审核人"
              :label-col="{ style: { width: '100px' } }"
            >
              <a-input v-model:value="formState.name" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item
              label="审核时间"
              :label-col="{ style: { width: '100px' } }"
            >
              <a-input v-model:value="formState.time" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row style="margin-top: 20px">
          <a-col :span="24">
            <a-form-item
              label="审核意见"
              :label-col="{ style: { width: '100px' } }"
            >
              <a-input v-model:value="formState.name" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-form-item style="margin-top: 20px">
          <div
            style="width: 100%; display: flex; justify-content: space-around"
          >
            <a-button style="width: 37%">拒绝</a-button>
            <a-button type="primary" style="width: 37%" html-type="submit"
              >提交</a-button
            >
          </div>
        </a-form-item>
      </a-card>
      <!-- 待审核信息 || 已审核页面基础信息 -->
      <a-descriptions
        bordered
        v-if="current === 0 || current === 3"
        style="margin-top: 20px"
        :labelStyle="{ width: '150px', textAlign: 'center' }"
        :contentStyle="{ width: '20%', textAlign: 'center' }"
      >
        <a-descriptions-item label="专项经费名称"
          >扩大科研项目经费</a-descriptions-item
        >
        <a-descriptions-item label="申请单位"
          >经济管理学院工会</a-descriptions-item
        >
        <a-descriptions-item label="当前节点申请状态">
          <a-badge status="processing" text="待审核" v-if="current === 0" />
          <a-badge status="success" text="审核完毕" v-else />
        </a-descriptions-item>
        <a-descriptions-item label="专项经费类型">
          <a-tag color="blue">工会专项经费</a-tag>
        </a-descriptions-item>
        <a-descriptions-item label="专项经费金额">
          <a-tag color="orange">888888</a-tag>
        </a-descriptions-item>
        <a-descriptions-item></a-descriptions-item>
        <a-descriptions-item label="申请人">是呆龙没错了</a-descriptions-item>
        <a-descriptions-item label="申请人电话"
          >17589520000</a-descriptions-item
        >
        <a-descriptions-item label="申请时间">2023-11-16</a-descriptions-item>
        <a-descriptions-item label="申请理由" :span="3">
          没钱了
        </a-descriptions-item>
      </a-descriptions>
      <!-- 财务审核信息 -->
      <a-badge-ribbon text="财务审核" v-if="current === 3">
        <a-descriptions
          bordered
          v-if="current === 3"
          style="margin-top: 20px"
          :labelStyle="{ width: '150px', textAlign: 'center' }"
          :contentStyle="{ width: '20%', textAlign: 'center' }"
        >
          <a-descriptions-item label="审核节点">财务审核</a-descriptions-item>
          <a-descriptions-item label="审核人">是呆龙没错了</a-descriptions-item>
          <a-descriptions-item label="审核时间">2023-11-18</a-descriptions-item>
          <a-descriptions-item label="审核理由" :span="3"
            >无理由</a-descriptions-item
          >
          <a-descriptions-item label="签字" :span="3">呆龙</a-descriptions-item>
        </a-descriptions>
      </a-badge-ribbon>
      <!-- 工会主席审核信息 -->
      <a-badge-ribbon text="工会主席审核" v-if="current === 3">
        <a-descriptions
          bordered
          v-if="current === 3"
          style="margin-top: 20px"
          :labelStyle="{ width: '150px', textAlign: 'center' }"
          :contentStyle="{ width: '20%', textAlign: 'center' }"
        >
          <a-descriptions-item label="审核节点"
            >工会主席审核</a-descriptions-item
          >
          <a-descriptions-item label="审核人">是呆龙没错了</a-descriptions-item>
          <a-descriptions-item label="审核时间">2023-11-18</a-descriptions-item>
          <a-descriptions-item label="审核理由" :span="3"
            >无理由</a-descriptions-item
          >
          <a-descriptions-item label="签字" :span="3">呆龙</a-descriptions-item>
        </a-descriptions>
      </a-badge-ribbon>
      <!-- 已审核页面----财务审核完毕 -->
      <a-descriptions
        bordered
        v-if="current === 1 && audit > 1"
        style="margin-top: 20px"
        :labelStyle="{ width: '150px', textAlign: 'center' }"
        :contentStyle="{ width: '20%', textAlign: 'center' }"
      >
        <a-descriptions-item label="审核人">是呆龙没错了</a-descriptions-item>
        <a-descriptions-item label="审核时间">2023-11-16</a-descriptions-item>
        <a-descriptions-item label="当前节点申请状态">
          <a-badge status="processing" text="财务审核" />
        </a-descriptions-item>
        <a-descriptions-item label="审核意见" :span="3">
          无意见
        </a-descriptions-item>
        <a-descriptions-item label="签字" :span="3">
          陈德龙
        </a-descriptions-item>
      </a-descriptions>
      <!-- 已审核页面----工会主席审核完毕 -->
      <a-descriptions
        bordered
        v-if="current === 2 && audit > 2"
        style="margin-top: 20px"
        :labelStyle="{ width: '150px', textAlign: 'center' }"
        :contentStyle="{ width: '20%', textAlign: 'center' }"
      >
        <a-descriptions-item label="审核人">是呆龙没错了</a-descriptions-item>
        <a-descriptions-item label="审核时间">2023-11-16</a-descriptions-item>
        <a-descriptions-item label="当前节点申请状态">
          <a-badge status="processing" text="工会主席审核" />
        </a-descriptions-item>
        <a-descriptions-item label="审核意见" :span="3">
          无意见
        </a-descriptions-item>
        <a-descriptions-item label="签字" :span="3">
          陈德龙
        </a-descriptions-item>
      </a-descriptions>
    </a-card>
  </a-page-header>
</template>

<script setup lang="ts">
import {
  UserOutlined,
  LoadingOutlined,
  SmileOutlined,
  SolutionOutlined,
  AuditOutlined,
} from "@ant-design/icons-vue";
import { reactive, ref, onMounted } from "vue";
import { message } from "ant-design-vue";
const emit = defineEmits<{
  (event: "close"): void;
}>();
const props = defineProps<{
  isView?: boolean;
  auditId: string;
}>();
onMounted(() => {
  audit.value = 2;
  current.value = 2;
  props.isView && current.value--;
});
const audit = ref(0);
const current = ref(0);
const formState = reactive({
  name: "",
  time: "",
});

const changeStatus = (val: any) => {
  let auditStatus = audit.value;
  if (props.isView) {
    auditStatus--;
  }
  if (val > auditStatus) {
    message.warning("暂时未审核到此流程");
    return;
  }
  current.value = val;
};
</script>

<style scoped></style>
